<template>
	<view class="home_container">
		<view class="home_box">
			<view class="top_img_box">
				<image src="/static/partnerRecruitment/img-top.png" mode="widthFix" class="top_img"></image>
			</view>
			<view class="bgc_img_all">
				<view class="bgc_img_box">
					<image :src="bgcImg" mode="" class="bgc_img"></image>
				</view>

				<view class="form_box">
					<view class="form_all">
						<view class="form_img_box">
							<image :src="registerImg" mode="widthFix" class="form_img"></image>
						</view>

						<view class="form_input_box">
							<view class="input_box">
								<u-input v-model="usernameValue" :border="false" :clearable="false" maxlength="11"
									placeholder="请输入用户名"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>
							<view class="input_box">
								<u-input v-model="phoneValue" type="number" :border="false" :clearable="false"
									maxlength="11" placeholder="请输入手机号"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<view class="input_code_box">
								<view class="">
									<u-input v-model="codeValue" type="number" :border="false" :clearable="false"
										placeholder="请输入验证码"
										placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
								</view>
								<view class="code_title" @click="sendCodeBtn">
									{{ send ? '获取验证码' : second + 's重新发送' }}
								</view>
							</view>

							<view class="input_box">
								<u-input v-model="passwordValue" :border="false" :clearable="false" placeholder="请输入密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<view class="input_box">
								<u-input v-model="nameValue" :border="false" :clearable="false" placeholder="请输入姓名"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<view class="input_box">
								<u-input v-model="idcardValue" :border="false" :clearable="false" placeholder="请输入身份证号码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<view class="input_textarea_box">
								<u-input v-model="remarkValue" :border="false" type="textarea" :clearable="false"
									placeholder="请输入自我及公司介绍"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view>

							<!-- <view class="input_box">
								<u-input v-model="surePasswordValue" :border="false" :clearable="false"
									placeholder="请确认密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->
							<view class="register_btn_box" @click="handlerRegister">
								提交申请
							</view>

							<view class="register_login_btn_box" @click="handlerLogin">
								已有账号 去登录
							</view>

							<view class="register_read_box">
								<view class="register_read_all">
									<!-- <view class="left_box">
										<image src="/static/icon-checked.png" mode="" class="left_img"></image>
									</view> -->
									<view class="right_box">
										注：提交申请后，官方审核成功或者失败后会通过短信通知您！
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				registerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668368b7334db_1719888055.png',
				usernameValue: '',
				phoneValue: '',
				codeValue: '',
				passwordValue: '',
				nameValue: '',
				idcardValue: '',
				remarkValue: '',
				send: true, //验证码按钮状态
				second: 0, //显示倒计时
				s: 60, //默认倒计时
				agentId: '',
				pid: '',
				ppid: '',
				agentProId: '',
				bgcImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66c697ca62ae9_1724291018.png'
			}
		},
		onLoad(options) {
			if (options) {
				this.agentProId = options.agent_pro_id
			}
		},
		methods: {
			// 去登录
			handleLogin() {
				// uni.redirectTo({
				// 	url: '/pages/login/login'
				// })
				location.href = 'https://saler.jkcae.com/h5/#/pages/login/login'
			},

			// 获取验证码接口
			getCode() {
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserGetSmsCode',
					method: 'POST',
					data: {
						phone: this.phoneValue
					},
					success: res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 提交申请接口
			addAgentCheckRecord() {
				const that = this
				this.$request('/addAgentCheckRecord', {
					username: this.usernameValue,
					mobile: this.phoneValue,
					code: this.codeValue,
					password: this.passwordValue,
					id_card_name: this.nameValue,
					id_card: this.idcardValue,
					remark: this.remarkValue,
					agent_pro_id: this.agentProId
				}, 'POST').then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '提交申请成功,稍等会有工作人员联系，可以关注公众号集客仓分销平台',
							icon: 'none',
							success: res => {
								setTimeout(() => {
									that.usernameValue = ''
									that.phoneValue = ''
									that.codeValue = ''
									that.passwordValue = ''
									that.nameValue = ''
									that.remarkValue = ''
								}, 1200)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			//验证码按钮点击
			sendCodeBtn() {
				let that = this;
				//防连点
				if (!that.send) {
					return false
				}
				this.send = false;
				that.time();
				if (this.phoneValue == '') {
					this.second = this.s
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
					})
					return;
				} else {
					that.getCode()
				}
			},

			//倒计时
			time() {
				let that = this;
				that.second = that.s;
				let interval = setInterval(() => {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval)
					} else {
						that.second--
					}
				}, 1000)
			},

			// 注册
			handlerRegister: Throttle(function() {
				if (this.usernameValue == '') {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return
				} else if (this.phoneValue == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (this.codeValue == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else if (this.passwordValue == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else if (this.passwordValue.length < 6) {
					uni.showToast({
						title: '密码不可以少于6位',
						icon: 'none'
					})
					return
				}

				this.addAgentCheckRecord()
			}, 5000),

			// 去登录
			handlerLogin() {
				// uni.navigateTo({
				// 	url: '/pages/login/login'
				// })
				location.href = 'https://saler.jkcae.com/h5/#/pages/login/login'
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #9acffc;
	}

	.home_container {

		.home_box {

			.top_img_box {
				width: 100%;

				.top_img {
					width: 100%;
					height: 100%;
				}
			}

			.bgc_img_all {
				padding-bottom: 30rpx;

				.bgc_img_box {
					width: 100%;

					.bgc_img {
						width: 100%;
						height: 100%;
					}
				}

				.form_box {
					position: relative;
					display: flex;
					justify-content: center;

					.form_all {
						// width: 619rpx;
						// height: 685rpx;
						background: #FFFFFF;
						box-shadow: 0px 2rpx 9rpx 0px rgba(66, 158, 238, 0.72);
						border-radius: 12rpx;
						padding: 0 30rpx 30rpx;

						.form_img_box {
							position: absolute;
							top: -34rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 326rpx;
							height: 66rpx;

							.form_img {
								width: 100%;
								height: 100%;
							}
						}

						.form_input_box {
							display: flex;
							flex-direction: column;
							margin-top: 67rpx;

							.input_box {
								width: 560rpx;
								height: 68rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding-left: 40rpx;
								margin-bottom: 37rpx;
							}

							.input_textarea_box {
								width: 560rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding-left: 40rpx;
								margin-bottom: 37rpx;
							}

							.input_code_box {
								display: flex;
								align-items: center;
								justify-content: space-between;
								width: 560rpx;
								height: 68rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding: 0 30rpx 0 40rpx;
								margin-bottom: 37rpx;

								.code_title {
									font-size: 22rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #499AFF;
								}
							}

							.register_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #F4271C, #FB8377);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
							}

							.register_login_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #3C91FF, #B5E5FE);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
								margin-top: 30rpx;
							}

							.login_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #F4271C, #FB8377);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
							}

							.register_read_box {
								width: 471rpx;
								padding-top: 30rpx;

								.register_read_all {
									display: flex;

									.left_box {
										width: 30rpx;
										height: 30rpx;
										margin-right: 16rpx;

										.left_img {
											width: 100%;
											height: 100%;
										}
									}

									.right_box {
										width: 100%;
										font-size: 21rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #499AFF;
									}
								}


							}
						}
					}
				}
			}
		}
	}
</style>